<template>
  <div class="login-page">
    <!-- login-pwd-side -->
    <el-form class="card" v-show="cardFlag == 1">
      <el-row align="middle" class="row">
        <el-col :span="8" :offset="7">
          <div class="title">LOGIN</div>
        </el-col>
        <el-col :span="5">
          <a class="tip" @click="switchCard(2)">验证码登录</a>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="18" :offset="3">
          <el-input placeholder="Email" size="large" v-model="userEmail" ></el-input>  
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="18" :offset="3">
          <el-input placeholder="Password" size="large" v-model="loginPswd" show-password></el-input>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="8" :offset="3">
          <el-button size="large" type="primary" class="active-btn" @click="loginWithPswd()">登录</el-button>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="9" :offset="4">
          <div class="tip">未注册？<a @click="switchCard(3)">立刻注册</a></div>
        </el-col>
        <el-col :span="4" :offset="3">
          <div class="tip"><a @click="switchCard(4)">忘记密码</a></div>
        </el-col>
      </el-row>
    </el-form>
    <!-- login-captcha-side -->
    <el-form class="card" v-show="cardFlag == 2">
      <el-row align="middle" class="row">
        <el-col :span="8" :offset="7">
          <div class="title">LOGIN</div>
        </el-col>
        <el-col :span="5">
          <a class="tip" @click="switchCard(1)">密码登录</a>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="18" :offset="3">
          <el-input placeholder="Email" size="large" v-model="userEmail"></el-input>  
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="9" :offset="3">
          <el-input placeholder="Captcha" size="large" v-model="loginCaptcha"></el-input>
        </el-col>
        <el-col :span="9" :offset="0">
          <el-button size="large" style="margin-left:2px" @click="getCaptcha('登录')">发送验证码</el-button>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="8" :offset="3">
          <el-button size="large" type="primary" class="active-btn" @click="loginWithCaptcha()">登录</el-button>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="9" :offset="4">
          <div class="tip">未注册？<a @click="switchCard(3)">立刻注册</a></div>
        </el-col>
        <el-col :span="4" :offset="3">
          <div class="tip"><a @click="switchCard(4)">忘记密码</a></div>
        </el-col>
      </el-row>
    </el-form>
    <!-- register-side -->
    <el-form class="card" v-show="cardFlag == 3">
      <el-row align="middle" class="row">
        <div class="title">REGISTER</div>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="18" :offset="3">
          <el-input placeholder="Email" size="large" v-model="userEmail"></el-input>  
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="18" :offset="3">
          <el-input placeholder="Nickname" size="large" v-model="registerNickname"></el-input>  
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="18" :offset="3">
          <el-input placeholder="Password" size="large" v-model="registerPswd" show-password></el-input>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="18" :offset="3">
          <el-input placeholder="Password Again" size="large" v-model="registerPswdRe" show-password></el-input>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="9" :offset="3">
          <el-input placeholder="Captcha" size="large" v-model="registerCaptcha"></el-input>
        </el-col>
        <el-col :span="9" :offset="0">
          <el-button size="large" style="margin-left:2px" @click="getCaptcha('注册')">发送验证码</el-button>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="8" :offset="3">
          <el-button size="large" type="primary" class="active-btn" @click="registerWithCaptcha()">注册</el-button>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="8" :offset="8">
          <div class="tip">已注册？<a @click="switchCard(1)">立即登录</a></div>
        </el-col>
      </el-row>
    </el-form>
    <!-- retrieve-side -->
    <el-form class="card" v-show="cardFlag == 4">
      <el-row align="middle" class="row">
        <div class="title">RETRIEVE</div>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="18" :offset="3">
          <el-input placeholder="Email" size="large" v-model="userEmail"></el-input>  
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="18" :offset="3">
          <el-input placeholder="New Password" size="large" v-model="retrievePswd" show-password></el-input>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="18" :offset="3">
          <el-input placeholder="Password Again" size="large" v-model="retrievePswdRe" show-password></el-input>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="9" :offset="3">
          <el-input placeholder="Captcha" size="large" v-model="retrieveCaptcha"></el-input>
        </el-col>
        <el-col :span="9" :offset="0">
          <el-button size="large" style="margin-left:2px" @click="getCaptcha('找回')">发送验证码</el-button>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="8" :offset="3">
          <el-button size="large" type="primary" class="active-btn" @click="retrieveWithCaptcha()">找回</el-button>
        </el-col>
      </el-row>
      <el-row align="middle" class="row">
        <el-col :span="8" :offset="10">
          <div class="tip"><a @click="switchCard(1)">退回登录</a></div>
        </el-col>
      </el-row>
    </el-form>
    <el-button class="back" @click="back()">&lt; 主页</el-button>
  </div>
</template>

<script>
// TODO switch typescript
// TODO 验证码间隔
import { loginPwd, loginCaptcha, register, forget } from '@/http/api/user'
import { captcha } from '@/http/api/email'
import { ElMessage } from 'element-plus'
import router from '@/router'
import store from '@/store'
import { Base64 } from 'js-base64'

export default {
  data() {
    return {
      userEmail: null,
      loginPswd: null,
      loginCaptcha: null,

      registerNickname: null,
      registerPswd: null,
      registerPswdRe: null,
      registerCaptcha: null,

      retrieveCaptcha: null,
      retrievePswd: null,
      retrievePswdRe: null,

      cardFlag: 1,
    }
  },
  created: function() {
    store.dispatch('changeLoginStatus', null)
  },
  methods: {
    switchCard: function(idx) {
      this.cardFlag = idx
    },
    getCaptcha: function(operate) {
      if (!this.userEmail) {
        ElMessage({
          showClose: true,
          type: 'error',
          message: '空输入'
        })
        return
      }
      captcha({
        email: this.userEmail,
        operate: operate
      })
      .then((res) => {
        if (res.data.code == 1200) {
          ElMessage({
            showClose: true,
            type: 'success',
            message: '验证码已发送'
          })
        } else if (res.data.code == 1201) {
          ElMessage({
            showClose: true,
            type: 'error',
            message: '发送失败'
          })
        }
      })
    },
    loginWithPswd: function() {
      // TODO 格式验证
      if (!this.userEmail || !this.loginPswd) {
        ElMessage({
          showClose: true,
          type: 'error',
          message: '空输入'
        })
        return
      }
      loginPwd({
        email: this.userEmail,
        pwd: this.loginPswd
      })
      .then((res) => {
        if (res.data.code == 1200) {
          ElMessage({
            showClose: true,
            type: 'success',
            message: '登录成功'
          })
          let json = Base64.decode(res.data.data.split(".")[1])
          let claims = JSON.parse(json)
          localStorage.setItem("jwt", res.data.data)
          localStorage.setItem("claims", JSON.stringify(claims))
          store.dispatch("changeLoginStatus", {
            claims: claims,
            jwt: res.data.data
          })
          router.push({name: "Market"})
        } else if (res.data.code == 1201) {
          ElMessage({
            showClose: true,
            type: 'error',
            message: '登录失败'
          })
        }
      })
    },
    loginWithCaptcha: function() {
      if (!this.userEmail || !this.loginCaptcha) {
        ElMessage({
          showClose: true,
          type: 'error',
          message: '空输入'
        })
        return
      }
      loginCaptcha({
        email: this.userEmail,
        captcha: this.loginCaptcha
      })
      .then((res) => {
        if (res.data.code == 1200) {
          ElMessage({
            showClose: true,
            type: 'success',
            message: '登录成功'
          })
          let json = Base64.decode(res.data.data.split(".")[1])
          let claims = JSON.parse(json)
          store.dispatch("changeLoginStatus", {
            claims: claims,
            jwt: res.data.data
          })
          router.push({name: "Market"})
        } else if (res.data.code == 1201) {
          ElMessage({
            showClose: true,
            type: 'error',
            message: '登录失败'
          })
        }
      })
    },
    registerWithCaptcha: function() {
      if (!this.userEmail || !this.registerNickname || !this.registerPswd || !this.registerPswdRe || !this.registerCaptcha) {
        ElMessage({
          showClose: true,
          type: 'error',
          message: '空输入'
        })
        return
      }
      if (this.registerPswd != this.registerPswdRe) {
        ElMessage({
          showClose: true,
          type: 'error',
          message: '密码不匹配'
        })
        return
      }
      register({
        email: this.userEmail,
        nickname: this.registerNickname,
        pwd: this.registerPswd,
        captcha: this.registerCaptcha
      })
      .then((res) => {
        if (res.data.code == 1200) {
          ElMessage({
            showClose: true,
            type: 'success',
            message: '注册成功'
          })
          this.cardFlag = 1
        } else if (res.data.code == 1201) {
          ElMessage({
            showClose: true,
            type: 'error',
            message: '注册失败'
          })
        }
      })
    },
    retrieveWithCaptcha: function() {
      if (!this.userEmail || !this.retrievePswd || !this.retrievePswdRe || !this.retrieveCaptcha) {
        ElMessage({
          showClose: true,
          type: 'error',
          message: '空输入'
        })
        return
      }
      if (this.retrievePswd != this.retrievePswdRe) {
        ElMessage({
          showClose: true,
          type: 'error',
          message: '密码不匹配'
        })
        return
      }
      forget({
        email: this.userEmail,
        pwd: this.retrievePswd,
        captcha: this.retrieveCaptcha
      })
      .then((res) => {
        if (res.data.code == 1200) {
          ElMessage({
            showClose: true,
            type: 'success',
            message: '找回成功'
          })
          this.cardFlag = 1
        } else if (res.data.code == 1201) {
          ElMessage({
            showClose: true,
            type: 'error',
            message: '找回失败'
          })
        }
      })
    },
    back: function() {
      router.push({name: 'Market'})
    }
  }
}
</script>

<style lang="less" scoped>
  @min-height: 500px;

  .login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    min-height: @min-height;
    background-color: #2c3338;
    color: #eee;
    user-select: none;
    .card {
      height: @min-height;
      width: 300px;
      // background: black;
      display: flex;
      flex-direction: row-reverse;
      justify-content: center;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
      .row {
        width: 100%;
        margin: 5px 0;
        .title {
          width: 100%;
          text-align: center;
          font-size: 25px;
          color: #eee;
        }
        .tip {
          line-height: 39px;
          font-size: 5px;
        }
        .active-btn {
          font-size: 18px;
          width: 224px;
        }
      }
    }
    .back {
      position: absolute;
      left: 50px;
      top: 100px;
    }
  }
</style>